<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Plugin by Eric Hynds</title>
<link href="./jquery.multiselect/jquery.multiselect.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="./jquery.multiselect/jquery-ui.css" />

<style type="text/css">
body { font:12px Helvetical, Arial, sans-serif; padding-bottom:200px }
h1 { margin-bottom:0 }
h2 { font-size:14px; padding:0; margin:25px 0 5px 0 }
p { margin:5px 0; padding:0 }
a { color:#001371 }
#back { background:#16254B; margin:5px 0 8px 0 }
#back div { padding:10px; color:#fff; font-size:14px }
#back a { color:#fff }

#callback { color:green; font-weight:bold }

/* sets a min width on the selects. you can also use the minWidth parameter */
select {  }
</style>

<!-- <script src="src/jquery-ui.js" type="text/javascript"></script> -->
<!-- <script src="http://jqueryui.com/themeroller/themeswitchertool/" type="text/javascript"></script> -->
<script src="./jquery.multiselect/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="./jquery.multiselect/jquery.bgiframe.js" type="text/javascript"></script>
<script src="./jquery.multiselect/jquery.multiselect.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){ 
	
	// notice how you can overwrite the defaults for instances
	$.fn.multiSelect.defaults.minWidth = 215;
	
	// $('#themeswitcher').themeswitcher({ loadTheme: 'lightness' });
	 
	// default options
	$("select.multiselect").multiSelect();

	// position
	$("#example5").multiSelect({ position:'middle', shadow:true, showHeader:false });
	
	// callbacks
	var $callback = $("#callback");
	$("#example4").multiSelect({
		onCheck: function(){
			$callback.html(this.value + ' ' + (this.checked ? 'checked' : 'unchecked') );
		},
		onOpen: function(){
			$callback.html("Select opened!");
		},
		onCheckAll: function(){
			$callback.html("Check all clicked!");
		},
		onUncheckAll: function(){
			$callback.html("Uncheck all clicked!");
		},
		onOptgroupToggle: function(checkboxes){
			var checked = $(checkboxes).is(":checked");
			var values = [];
			
			$.each(checkboxes, function(i,box){
				values[i] = box.value;
			});
			
			$callback.html("Checkboxes " + (checked ? "checked" : "unchecked") + ": " + values.join(', ') );
		}
	});
	
	// Options displayed in comma-separated list
	$("#example6").multiSelect({ 
		minWidth:400,
		selectedList:5
	});
	
	// 'Check All' text changed
	$("#example7").multiSelect({ 
		checkAllText: 'Select All',
		unCheckAllText: 'Deselect All',
		selectedText: function(numChecked, numTotal, checkedItems){
			return numChecked + ' of ' + numTotal + ' checked';
		},
		minWidth: 225
	});

	// disabled
	var $widget = $("#example-disabled");
	$widget.siblings("button").click(function(){
		$widget.toggleClass("ui-state-disabled");
	});
	
	// open by default
	$("#example12").multiSelect({
		state: 'open'
	});
	
	// radio buttons instead of checkboxes
	$("#example-radio").multiSelect({
		multiple: false,
		showHeader: false,
		selectedText: function(numChecked, numTotal, checkedItem){
			return $(checkedItem).attr("title");
		}
	});
	
	$("#examples").submit(function(e){
		var data = $(this).serialize();
		alert( data.length ? data : 'Nothing to serialize; check a box or two' );
		e.preventDefault();
	});
});
</script>

</head>
<body>
	
	<h1>jQuery MultiSelect Plugin - Examples</h1>

	<div id="back">
		<div><a href="http://www.erichynds.com/jquery/jquery-multiselect-plugin-with-themeroller-support">&laquo; Return to blog post &amp; documentation</a></div>
	</div>
	
	<p>This plugin turns an ordinary HTML select control into elegant drop down list of checkboxes, stylable with ThemeRoller.</p>
	
	<ul style="margin-bottom:20px">
	<li>Latest version 0.6 (05/04/2010)</li>
	<li>Download the <a href="http://github.com/ehynds/jquery-multiselect/raw/0.6/src/jquery.multiselect.js">source</a> or the <a href="http://github.com/ehynds/jquery-multiselect/raw/0.6/src/jquery.multiselect.min.js">minified</a> version, and the <a href="http://github.com/ehynds/jquery-multiselect/raw/0.6/jquery.multiselect.css">CSS file</a>.</li>
	<li><a href="http://github.com/ehynds/jquery-multiselect">Follow on GitHub</a></li>
	<li><a href="http://www.erichynds.com/jquery/jquery-multiselect-plugin-with-themeroller-support/">Documentation, blog post, and comments</a></li>
	</ul>

	<!-- <p></p><div id="themeswitcher"></div> -->
	<form action="" method="post" id="examples">
	<h2>Example 1: Basic</h2>

	<p>
		<select name="example1" class="multiselect" multiple="multiple" size="5" title="Click to select an option">
		<option value=""></option>
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		<option value="option5">Option 6</option>
		<option value="option5">Option 7</option>
		<option value="option5">Option 8</option>
		<option value="option5">Option 9</option>
		<option value="option5">Option 10</option>
		<option value="option5">Option 11</option>
		<option value="option5">Option 12</option>
		</select>
	</p>
	
	<h2>Example 2: Pre-selected &amp; disabled options with a custom width</h2>
	<p>Options one, three, and four have the <code>selected="selected"</code> attribute and are checked by default.  Options five and
	six have the <code>disabled="disabled"</code> attribute.  The original select input has an inline-CSS width of 300px, which the MultiSelect widget inherits. </p>
	<p>
		<select name="example2" class="multiselect" multiple="multiple" size="5" style="width:300px">
		<option value=""></option>
		<option value="option1" selected="selected">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3" selected="selected">Option 3</option>
		<option value="option4" selected="selected">Option 4</option>
		<option value="option5" disabled="disabled">Option 5</option>
		<option value="option6" disabled="disabled">Option 6</option>
		<option value="option7">Option 7</option>
		<option value="option8">Option 8</option>
		<option value="option9">Option 9</option>
		</select>
	</p>
	
	<h2>Example 3: Disable the entire widget</h2>
	<p>
		The &quot;Toggle Disable&quot; button simply toggles the class ui-state-disabled on the select.  It does NOT use the disabled
		attribute because of <a href="http://dev.jquery.com/ticket/6211">bug #6211</a>.  Be aware of this because the checkboxes might still be passed
		to the server when the widget is disabled.
	</p>
	<p>
		<select id="example-disabled" name="example-disabled" class="multiselect" disabled="disabled" multiple="multiple" size="5">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		</select>
		<br /><button type="button" name="toggle">Toggle Disabled</button>
	</p>
	
	<h2>Example 4: Open by default</h2>
	<p><b>NOTE:</b> This widget is designed to operate like normal HTML select boxes.  Therefore, clicking on the document or on another
	select will close all other open selects.</p>
	<p>
		<select id="example12" name="example12" multiple="multiple" size="5">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		</select>
	</p>
	
	<h2>Example 5: Optgroup support</h2>
	<p>Click on an optgroup's heading to toggle the checked state of the entire group.</p>
	<p>
		<select name="example3" class="multiselect" multiple="multiple" size="5">
		<optgroup label="Group One">
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
		</optgroup>
		<optgroup label="Group Two">
			<option value="option4">Option 4</option>
			<option value="option5">Option 5</option>
			<option value="option6">Option 6</option>
			<option value="option7">Option 7</option>
		</optgroup>
		</select>
	</p>

	<h2>Example 6: onOpen, onCheck, onCheckAll, onUncheckAll, and onOptgroupToggle callbacks</h2>
	<p>
		<p id="callback">Callback target</p>
		<select name="example4" id="example4" multiple="multiple" size="5">
		<optgroup label="Group One">
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
		</optgroup>
		<optgroup label="Group Two">
			<option value="option4">Option 4</option>
			<option value="option5">Option 5</option>
			<option value="option6">Option 6</option>
			<option value="option7">Option 7</option>
		</optgroup>
		</select>
	</p>

	<h2>Example 7: Positioning set to &quot;middle&quot;; no header with a CSS drop shadow</h2>
	<p>
		<select name="example5" id="example5" multiple="multiple" size="5">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		<option value="option6">Option 6</option>
		<option value="option7">Option 7</option>
		</select>
	</p>
	
	<h2>Example 8: Displaying options in a list</h2>
	<p>A function is passed to the <code>selectedText</code> parameter which returns a list of the items selected,
	as long as 5 or less checkboxes are checked.  Once 5 or more checkboxes have been checked, <code>selectedText</code>
	returns the number checked.  <code>minWidth</code> is set to 400 (pixels).</p>
	<p>
		<select name="example6" id="example6" multiple="multiple" size="5">
		<option value=""></option>
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		<option value="option6">Option 6</option>
		<option value="option7">Option 7</option>
		</select>
	</p>

	<h2>Example 9: &quot;Check All&quot; text changed; input displays the number checked &amp; the total number of checkboxes</h2>
	<p>
		<select name="example7" id="example7" multiple="multiple" size="5">
		<option value=""></option>
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		<option value="option6">Option 6</option>
		<option value="option7">Option 7</option>
		</select>
	</p>
	
	<h2>Example 10: Multiple instances in-line</h2>
	<p>
		<select name="example8-1" class="multiselect" multiple="multiple" size="5">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		</select>

		<select name="example8-2" class="multiselect" multiple="multiple" size="5">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		</select>

		<select name="example8-3" class="multiselect" multiple="multiple" size="5">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		</select>
	</p>
	
	<h2>Example 11: Radio boxes instead of checkboxes.</h2>
	<p>This is a quick way to force only one option being chosen.  The <code>multiple</code> and <code>showHeader</code> options are set to false, with a custom <code>selectedText</code> callback.</p>
	<p>
		<select id="example-radio" name="example-radio" multiple="multiple" size="5">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
		</select>
	</p>
	
	<p>&nbsp;</p>
	<select><option value="">Select to test IE6 bgiframe</option></select><br /><br />
	
	
	<input type="submit" name="submit" value="Click to Serialize" />
	<input type="reset" name="reset" value="Reset" />
	</form>
</body>
</html>
